<template>
	<view class="page-order-det" :style="$theme.pageStyle">
		<view class="top"> </view>
		<view class="body">

			<view class="goods-info">
				<view class="title"> 商品信息 </view>
				<view class="list">
					<view class="item">
						<image :src="Goods.image" mode="aspectFill" class="preview" />
						<view class="main">
							<view class="info">
								<text class="name">{{Goods.name}}</text>
								<text class="size">{{Goods.remarks}}</text>
							</view>
							<view class="price">
								<text class="unit">￥</text>
								<text class="num">{{Goods.price}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="discount">
					<text class="name">优惠金额</text>
					<view class="price"> - ￥<text>{{Order.favorable}}</text> </view>
				</view>
				<view class="pay">
					<text class="name">实付款</text>
					<text class="price">￥{{Order.order_amount}}</text>
				</view>
			</view>
			<view class="order-info">
				<view class="title">订单信息</view>
				<view class="list">
					<view class="item">
						<text class="label">订单编号</text>
						<text class="value">{{Order.sn}}</text>
					</view>
					<view class="item">
						<text class="label">创建时间</text>
						<text class="value">{{Order.create_time}}</text>
					</view>
					<view class="item">
						<text class="label">支付状态</text>
						<text class="value">{{Order.pay_status_text}}</text>
					</view>
					<view class="item" v-if="Order.pay_status === 1">
						<text class="label">支付时间</text>
						<text class="value">{{Order.pay_time}}</text>
					</view>
				</view>
			</view>
			<view class="order-pay" v-if="Order.pay_status != 1">
				<view class="total">
					<text class="name">合计：</text>
					{{Order.order_amount}}
				</view>
				<view class="btn">
					<view class="cancel">
						<u-button text="取消订单"></u-button>
					</view>
					<view class="go-pay">
						<u-button text="去付款" type="error"></u-button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $H from '@/common/js/request.js';

	export default {
		data() {
			return {
				id: '',
				mail:'',
				Order: {},
				Goods: {},
				timeData: {},
				Popshow: false
			};
		},
		onLoad(opt) {
			this.id = opt.id;
			this.getData();
		},
		methods: {
			async getData() {
				try {
					const res = await $H.post('order/servicepackagedetail', {
						id: this.id
					}, {
						token: true
					});
					this.Order = res.data;
					this.Goods = res.data.goods;
				} catch (error) {
					// 处理错误
				}
			},
			onChange(e) {
				this.timeData = e;
			},
			Popdispaly() {
				this.Popshow = true
			},
			Popclose() {
				this.Popshow = false
			},
			Popopen() {},
			async confirm() {
				
				if(this.mail === ''){
					return uni.showToast({
						icon:"none",
						title:"请输入邮箱号！"
					})
				}

				try {
					const res = await $H.post('service/sendcontract', {
						id: this.id,
						mail: this.mail
					}, {
						token: true
					});
					
					uni.showToast({
						icon:"none",
						title: res.msg
					})
					
					this.Popclose()
					
				} catch (error) {
					// 处理错误
				}
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.popclass {
		margin: 20px;
		.title{
			font-size: 16px;
			font-weight: bold;
		}
		.input{
			margin-top: 20px;
			margin-bottom: 20px;
		}
		.popbtn {
			background: var(--color-primary);
			color: #ffffff;
			font-weight: bold;
			width: 100%;
			height: 50px;
			border-radius: 8px;
			line-height: 50px;
			text-align: center;
			font-size: 16px;
		}
	}

	.page-order-det {
		position: relative;

		.top {
			width: 100%;
			height: 548rpx;
			margin-top: -44px;
			background: linear-gradient(180deg, #e9e7ef 80%, #f0f0f4 100%);
		}

		.body {
			position: absolute;
			top: 150rpx;
			width: 100%;
			padding-bottom: 140rpx;

			.status {
				display: flex;
				align-items: center;
				width: calc(100% - 64rpx);
				margin: 0 32rpx 50rpx 32rpx;
				padding: 52rpx 30rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 8rpx;

				.s-img {
					display: block;
					width: 58rpx;
					height: 58rpx;
					margin-right: 24rpx;
				}

				.status-name {
					display: block;
					font-size: 40rpx;
					font-weight: 500;
					color: #565656;
				}

				.tips {
					font-size: 24rpx;
					font-weight: 400;
					color: #ababab;
				}
			}

			.goods-info {
				width: calc(100% - 64rpx);
				margin: 0 32rpx 20rpx 32rpx;
				padding: 52rpx 30rpx 36rpx 30rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 8rpx;

				.title {
					padding-bottom: 20rpx;
					border-bottom: solid 2rpx #e8e8e8;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}

				.list {
					margin-bottom: 36rpx;
					border-bottom: solid 2rpx #e8e8e8;

					.item {
						display: flex;
						position: relative;
						padding: 30rpx 0;

						.preview {
							display: block;
							width: 188rpx;
							height: 188rpx;
							margin-right: 20rpx;
						}

						.main {
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.info {
								.name {
									display: block;
									font-size: 32rpx;
									font-weight: 400;
									color: #333333;
								}

								.size {
									font-size: 24rpx;
									font-weight: 400;
									color: #8e8e8e;
								}
							}

							.price {
								font-size: 32rpx;
								font-weight: bold;
								color: #343434;
							}
						}

						.buy-num {
							position: absolute;
							top: 0;
							right: 0;
							font-size: 28rpx;
							font-weight: 400;
							color: #8e8e8e;
						}
					}
				}

				.delivery {
					display: flex;
					align-items: center;
					margin-bottom: 30rpx;

					.label {
						display: block;
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.value {
						font-size: 28rpx;
						font-weight: 400;
						color: #8e8e8e;
					}
				}

				.discount {
					display: flex;
					align-items: center;
					margin-bottom: 38rpx;

					.name {
						flex: 1;
						font-size: 28rpx;
						font-weight: 400;
						color: #333333;
					}

					.price {
						font-size: 28rpx;
						font-weight: 400;
						color: red;
					}
				}

				.pay {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;

					.name {
						display: block;
						margin-right: 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #343434;
					}

					.price {
						font-size: 36rpx;
						font-weight: 500;
						color: red;
					}
				}
			}

			.order-info {
				width: calc(100% - 64rpx);
				margin: 0 32rpx 20rpx 32rpx;
				padding: 52rpx 30rpx 1rpx 30rpx;
				box-sizing: border-box;
				background-color: #ffffff;
				border-radius: 8rpx;

				.title {
					margin-bottom: 36rpx;
					padding-bottom: 20rpx;
					border-bottom: solid 2rpx #e8e8e8;
					font-size: 36rpx;
					font-weight: 500;
					color: #333333;
				}

				.list {
					.item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 40rpx;

						.label {
							font-size: 28rpx;
							font-weight: 400;
							color: #333333;
						}

						.value {
							font-size: 28rpx;
							font-weight: 400;
							color: #8e8e8e;
						}
					}
				}
			}

			.order-pay {
				display: flex;
				align-items: center;
				position: fixed;
				left: 0;
				bottom: 0;
				width: 100%;
				height: 60px;
				padding: 32rpx 32rpx;
				background-color: #ffffff;
				box-sizing: border-box;

				.total {
					display: flex;
					align-items: center;
					flex: 1;

					.name {
						font-size: 24rpx;
						font-weight: 400;
						color: #333333;
					}
				}

				.btns {
					// background: rgba(0, 85, 255, .1);
					background: var(--color-primary);
					color: #ffffff;
					font-weight: bold;
					width: 100%;
					height: 50px;
					border-radius: 8px;
					line-height: 50px;
					text-align: center;
					font-size: 16px;
				}

				.btn {
					display: flex;

					.cancel {
						margin-right: 16rpx;
					}

					.go-pay {
						:deep(.ayi-button) {
							background-color: #343434;
						}

						:deep(.ayi-button__text) {
							color: #ffffff;
						}
					}
				}
			}
		}
	}
</style>